<template>
	<view style="width: 750rpx;height: 100vh;background-color: #F5F5F8;">
		<view style="width: 750rpx;height: 20rpx;"></view>
		<view style="width: 750rpx;height: 386rpx;background-color: #FFFFFF;">	
			<view style="width: 750rpx;height: 110rpx;background-color: #FFFFFF;">
				<view style="font-size: 34rpx;line-height: 92rpx;margin-top: 20rpx;margin-left: 30rpx;float: left;">检查名称</view>
				<input :value="value" @input="clearInput" style="font-size: 34rpx;line-height: 92rpx;margin-top: 20rpx;margin-left: 94rpx;width: 400rpx;height: 92rpx;float: left;" />
				<image src="../../static/btn_delete@3x.png" style="width: 40rpx;height: 40rpx;margin-top: 48rpx;float: right;margin-right: 20rpx;" @click="clearIcon()"></image>		
			</view>
			<view style="height: 2rpx;width: 720rpx;margin-left: 30rpx;background-color: #E5E5E5;"></view>
			<view style="width: 750rpx;height: 90rpx;background-color: #FFFFFF;">
				<view style="font-size: 34rpx;line-height: 90rpx;margin-left: 30rpx;float: left;">起始时间</view>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				    <view v-if="real" style="margin-left: 94rpx;font-size: 34rpx;line-height: 92rpx;color: #CCCCCC;width: 450rpx;float: left;">请选择</view>
					<view style="margin-left: 94rpx;font-size: 34rpx;line-height: 92rpx;float: left;" v-else>{{date}}</view>
					<view style="color: #C7C7CC;line-height: 22rpx;margin-top: 32rpx;left:	700rpx ;position: absolute;">></view>
				</picker>
			</view>
			<view style="height: 2rpx;width: 720rpx;margin-left: 30rpx;background-color: #E5E5E5;"></view>
			<view style="width: 750rpx;height: 90rpx;background-color: #FFFFFF;">
				<view style="font-size: 34rpx;line-height: 90rpx;margin-left: 30rpx;float: left;">截止时间</view>
				<picker mode="date" :value="date1" :start="startDate" :end="endDate" @change="bindDateChange1">
				    <view v-if="real1" style="margin-left: 94rpx;font-size: 34rpx;line-height: 92rpx;color: #CCCCCC;width: 450rpx;float: left;">请选择</view>
					<view style="margin-left: 94rpx;font-size: 34rpx;line-height: 92rpx;float: left;" v-else>{{date1}}</view>
					<view style="color: #C7C7CC;line-height: 22rpx;margin-top: 32rpx;left:	700rpx ;position: absolute;">></view>
				</picker>
			</view>
			<view style="height: 2rpx;width: 720rpx;margin-left: 30rpx;background-color: #E5E5E5;"></view>
			<view style="width: 750rpx;height: 90rpx;background-color: #FFFFFF;">
				<view style="font-size: 34rpx;line-height: 90rpx;margin-left: 30rpx;float: left;">检查类型</view>
				<picker mode="selector" :range="array" :value="index" @change="bindchange">
					<view v-if="real2" style="margin-left: 94rpx;font-size: 34rpx;line-height: 92rpx;color: #CCCCCC;width: 450rpx;float: left;">请选择</view>
					<view style="margin-left: 94rpx;font-size: 34rpx;line-height: 92rpx;float: left;" v-else>{{array[date2]}}</view>
					<view style="color: #C7C7CC;line-height: 22rpx;margin-top: 32rpx;left:	700rpx ;position: absolute;">></view>
				</picker>
			</view>
			<view style="height: 2rpx;width: 720rpx;margin-left: 30rpx;background-color: #E5E5E5;margin-top: 4rpx;"></view>
		</view>	
		<view style="background-color: #FFFFFF;width: 750rpx;height: 90rpx;margin-top: 2rpx;" v-if="date2=='0'">
			<view style="width: 750rpx;height: 90rpx;background-color: #FFFFFF;">
				<view style="font-size: 34rpx;line-height: 90rpx;margin-left: 30rpx;float: left;">抽查范围</view>
				<view @click="gotoChoose()">	
					<view  style="margin-left: 94rpx;font-size: 34rpx;line-height: 92rpx;color: #CCCCCC;width: 450rpx;float: left;">请选择</view>
					<!-- <view style="margin-left: 94rpx;font-size: 34rpx;line-height: 92rpx;float: left;" v-else></view> -->
					<view style="color: #C7C7CC;line-height: 22rpx;margin-top: 32rpx;left:700rpx;position: absolute;">></view>
				</view>	
			</view>
			<view style="height: 2rpx;width: 720rpx;margin-left: 30rpx;background-color: #E5E5E5;"></view>
		</view>
		
		<view style="display: flex;float: left;margin-right: 100rpx;" v-if="date2!=''&&date2!='0'" >
			<image src="../../static/icon!@3x.png" style="width: 40rpx;height: 40rpx;margin-left: 24rpx;margin-top: 12rpx;"></image>
			<view style="color: #F86E21;font-size: 26rpx;line-height: 26rpx;margin-top: 20rpx;margin-left: 10rpx;">已选择263个避灾点</view>
		</view>
		<view style="position: fixed;bottom: 0;width: 750rpx;height: 150rpx;background-color: #FFFFFF;">
			<button style="width: 690rpx;height: 94rpx;margin-left: 32rpx;margin-top: 14rpx;background-color: rgba(81, 154, 255, 0.3);color: #FFFFFF;border-radius: 47rpx;" v-if="btnreal">立即创建</button>
			<button style="width: 690rpx;height: 94rpx;margin-left: 32rpx;margin-top: 14rpx;background-color: #519AFF;color: #FFFFFF;border-radius: 47rpx;" v-else @click="goto11()">立即创建</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
			           format: true
			       })
			return {
				date: currentDate,
				date1:'',
				showClearIcon:false,
				value:'2022年防汛检查',
				focus:false,
				real:true,
				real1:true,
				ttt:'',
				real2:true,
				array:['抽查','全覆盖检查'],
				date2:'',
				btnreal:true
			}
		},
		computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
		methods: {	
			bindDateChange(e){
				this.date = e.target.value
				console.log(e);
				console.log(this.date);
				this.real=false
				if(this.real==false&&this.real1==false&&this.real2==false)
				{
					this.btnreal=false
					console.log(this.btnreal);
				}
			},
			bindDateChange1(e){
				this.date1 = e.target.value
				console.log(e);
				console.log(this.date1);
				this.real1=false
				if(this.real==false&&this.real1==false&&this.real2==false)
				{
					this.btnreal=false
					console.log(this.btnreal);
				}
			},
			bindchange(e){
				console.log(e);
				this.date2=e.target.value
				this.real2=false
				if(this.real==false&&this.real1==false&&this.real2==false)
				{
					this.btnreal=false
					console.log(this.btnreal);
				}
				
			},
			clearInput(event){
				console.log(event);
				this.value=event.detail.value;
			},
			clearIcon(){
				this.showClearIcon = false;
				this.value = '';
			},
			goto11(){
				uni.navigateTo({
					url:'./areaList'
				})
			},
			gotoChoose(){
				uni.navigateTo({
					url:'FWchoose'
				})
			},
			getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 60;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			        }
		},
	}
</script>

<style>

</style>
